<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>click</button>
    <script>
        let button = document.querySelector('button');

        // 防抖的使用还是很频繁的，所以这是一个js开发的基本功，所以务必牢记且理解

        // 举个例子，我们现在有一个按钮，每当我点击他的时候，他就会发送一个网络请求，有一天遇到了个sb，他天天没事，就一直点那个按钮，1秒点了十几次，直接给服务器干崩了，所以防抖的意义就在于这里，他实现了一个功能，只要你在规定的时间间隔内频繁点击，那么只有最后一次会生效。举个例子，我限制为1秒，那么你在如果你的第一次点击和第二次点击的时间间隔没有超过一秒，那么第一次的就会失效，同理，如果你没满一秒又点了第三次，那么第二次点击就会失效。直到你停下你的贱手满一秒
        function debounce(time, fun) {
            let timer = null;
            return function () {
                if (timer != null) {
                    clearTimeout(timer);
                }
                timer = setTimeout(() => {
                    fun();
                }, time);
            }
        }

        // 但是如果用户不手贱，只点了一次，我们还是让他一秒后才执行，这显然就有些不太好了。所以我们可以改进一下
        function debouncePlus(time, fun) {
            let timer = null;
            return function () {
                if (timer != null) {
                    clearTimeout(timer);
                }
                let firstClick = !timer;
                if(firstClick){
                    fun();
                }
                timer = setTimeout(() => {
                    timer = null;
                }, time);
            }
        }

        button.onclick = debounce(1000, function () {
            console.log(11111);
        });

    </script>
</body>

</html>